<template>
  <div>{{ mdString }}</div>
  <button @click="mdRender">渲染</button>
  <div v-html="h5String"></div>
</template>

<script>

import markdownIt from 'markdown-it'
import markdownItContainer from 'markdown-it-container'
export default {
  name: "Hello",
  data() {
    return {
      h5String: "",
      mdString: `
:::warning
啊啊啊
:::`,
      md: null,
    }
  },
  created() {
    let that = this;
    this.md = new markdownIt();
    this.md.use(markdownItContainer, 'warning', {
      validate: function (params) {
        return params.trim().match(/^warning\s*(.*)$/);
      },
      render: function (tokens, idx) {
        const m = tokens[idx].info.trim().match(/^warning\s*(.*)$/);
        console.log(m);
        if (tokens[idx].nesting === 1) {
          // opening tag
          return '<div class="box">' + that.md.utils.escapeHtml(m[1]) + '\n';
        } else {
          // closing tag
          return '</div>\n';
        }
      }
    });
    this.mdRender();
  },
  methods: {
    mdRender() {
      this.h5String = this.md.render(this.mdString)
    }
  }
}
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
